<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="button" value="加载数据">
<h1>商品列表</h1>
<table>
    <tr>
        <th>商品名</th>
        <th>库存</th>
        <th>价格</th>
    </tr>
</table>
<!--引入jQuery框架-->
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script>
//给按钮添加点击事件
    $("input").click(function () {
        //模拟从服务器请求到的数据
    let arr=[{title:"小米手机",num:1000,price:5000},
             {title:"一加手机",num:1000,price:5000},
             {title:"未窝手机",num:1000,price:5000}];
        //把数据显示到页面中
        for (i=0;i<arr.length;i++){
            let item=arr[i];//遍历出商品对象
            //创建tr和td
            let tr=$("<tr></tr>")
            let titletd=$("<td></td>")
            let numtd=$("<td></td>")
            let pricetd=$("<td></td>")
            //设置显示的文本
            titletd.text(item.title);
            numtd.text(item.num);
            pricetd.text(item.price);
            //添加到tible标签里面
            tr.append(titletd);
            tr.append(numtd);
            tr.append(pricetd);
            $("table").append(tr);//选择器
        }
    })

</script>

</body>
</html>